<template>
  <div class="web-container book-all">
    <div class="content-top"  v-loading="loading">
      <div class="left">
        <div class="title">新书精选</div>
        <ul>
          <li v-for="(item,index) in recommendListLeft" :key="index" v-html="item.bookName" @click="goToInfo(item.bookId,item.columnId,item.bookName)">时光不愿老去</li>
        </ul>
      </div>
      <div class="right">
        <div class="item" v-if="recommendListRight" v-for="(item,index) in recommendListRight" :key="index">
          <span class="item-cover" :style="{backgroundImage:'url('+item.cover+')'}"></span>
          <div class="item-right">
            <span class="name" v-html="item.bookName">生而不凡</span>
            <span class="author" v-html="item.author">[马来西亚]</span>
            <span class="desc" v-html="item.press">Lorem ipsum dolor sit amet consectetur adipisicing</span>
            <el-button type="primary" round @click="goToInfo(item.bookId,item.columnId,item.bookName)">书籍详情</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="content-bottom">
      <span class="title">图书推荐</span>
      <div class="list" >
        <div class="item" v-for="(item,index) in classDetailList" :key="index" @click="goToInfo(item.bookId,item.columnId,item.bookName)">
          <span class="item-cover" :style="{backgroundImage:'url('+item.cover+')'}"></span>
          <div class="item-right">
            <span class="name" v-html="item.bookName"></span>
            <span class="author" v-html="item.author"></span>
            <span class="desc" v-html="item.press"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {GetClassList,GetBookDetailList,GetNewBookRemmodList} from "@/api/Api";
import {index} from "@/api/index";
export default {
  data() {
    return {
      classList: [],
      classDetailList: [],
      total: 0,
      pageSize: 24,
      currentPage: Number(this.$route.query.currentPage) || 1,
      recommendListLeft: [],
      recommendListRight: [],
      loading:true
    };
  },
  created() {
    GetNewBookRemmodList().then(result => {
      this.loading = false
      this.recommendListLeft = result.data.data.slice(0, 7);
      this.recommendListRight = result.data.data.slice(8, 12);
      console.log(result, 123);
      
    });
    index(12).then(res=>{
      console.log(res.data.data[0].recommendResList)
      this.classDetailList = res.data.data[0].recommendResList
    })
  },
  components: {},
  methods: {
    handleSizeChange(val) {
      this.$router.push(this.$route.path + "?currentPage=" + this.currentPage);
    },
    handleCurrentChange(val) {
      this.$router.push(this.$route.path + "?currentPage=" + this.currentPage);
    },
    goToInfo(bookId, columnId,bookName) {
      this.$router.push("/book/info?bookId=" + bookId + "&columnId=" + columnId +"&bookName="+bookName);
    }
  },
  watch: {
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
  .book-all .content-top .left{
    background: #e93926;
  }
}
.book-all {
  .content-top {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    .left {
      width: 232px;
      padding: 0px 20px;
      border-radius: 10px;
      background: #2dd0a5; /* 标准的语法 */
      min-height: 400px;
      color: #fff;
      .title {
        font-size: 20px;
        padding: 20px 0;
        border-bottom: 1px solid #fff;
      }
      ul {
        padding-left: 0px;
        cursor: pointer;
        li {
          border-bottom: 1px solid #fff;
          padding: 20px 0;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        li:last-child {
          border-bottom: none;
        }
      }
    }
    .right {
      margin-left: 40px;
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      .item:nth-child(1),
      .item:nth-child(2) {
        padding-bottom: 65px;
      }
      .item:nth-child(3),
      .item:nth-child(4) {
        padding-top: 55px;
        border: none;
      }
      .item {
        display: flex;
        width: 376px;
        border-bottom: 1px solid #f1f1f1;
        height: 188px;
        .item-cover {
          width: 140px;
          height: 188px;
          background: url("/static/images/base/book.png") no-repeat;
          background-size: cover;
          border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        }
        .item-right {
          display: flex;
          flex-direction: column;
          flex: 1;
          margin-left: 30px;
          width: 206px;
          .name {
            font-size: 18px;
            margin-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .author {
            margin-top: 5px;
            color: #808080;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .desc {
            margin-top: 5px;
            display: -webkit-box;
            font-size: 14px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #a1a1a1;
          }
          .el-button {
            // background-color: #15c798;
           margin-top: 60px;
            line-height: 32px;
            width: 110px;
            font-size: 16px;
            padding: 0px 20px;
            border: 2px solid transparent;
            .el-button--primary:focus,
            .el-button--primary:hover {
              // background-color: #15c798;
            }
          }
          .el-button:first-child {
            background-color: #fff;
            // border-color: #15c798;
            color: #15c798;
            .el-button--primary {
              // border-color: #15c798;
            }
          }
        }
      }
      .item:nth-child(2n) {
        padding-left: 96px;
      }
    }
  }
  .content-bottom {
    margin-top: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    min-height: 300px;
    .title {
      font-size: 26px;
      padding: 20px 0;
      display: block;
      border-bottom: 1px solid #c1c1c1;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      border-bottom: 1px solid #ededed;
      .item:nth-child(3n + 1) {
        padding-left: 0px;
      }
      .item {
        cursor: pointer;
        width: 313px;
        margin-top: 20px;
        padding-bottom: 20px;
        padding-left: 110px;
        margin-bottom: -1px;
        border-bottom: 1px solid #ededed;
        display: flex;
        .item-cover {
          background: url("/static/images/base/book.png") no-repeat;
          width: 90px;
          height: 122px;
          display: block;
          background-size: cover;
          border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        }
        .item-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 20px;
          width: 122px;
          .name {
            font-size: 18px;
            margin-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .author {
            margin-top: 5px;
            font-size: 14px;
            color: #808080;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .desc {
            margin-top: 5px;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #a1a1a1;
          }
        }
      }
    }
  }
}
</style>


